import { Theme } from "globals.slint";

export enum TTPosition {
    Bottom,
    Left,
    Right,
    Top,
}

export component ToolTip {
    preferred-height: 100%;
    preferred-width: 100%;
    in-out property <bool> show: false;

    in property <TTPosition> position: TTPosition.Bottom;
    in property <length> owner-height;
    in property <length> owner-width;
    in property <length> owner-x;
    in property <length> owner-y;
    in property <string> text;

    x: pos-x(self.width);
    y: pos-y(self.height);
    z: 1;
    width: layout.preferred-width;
    height: layout.preferred-height;

    pure public function pos-x(wid: length) -> length {
        if (root.position == TTPosition.Right) {
            root.owner-x + root.owner-width + 8px;
        } else if (root.position == TTPosition.Left) {
            root.owner-x - wid - 8px;
        } else {
            root.owner-x + (root.owner-width - wid) / 2;
        }
    }

    pure public function pos-y(hght: length) -> length {
        if (root.position == TTPosition.Top) {
            root.owner-y - 8px - hght;
        } else if (root.position == TTPosition.Bottom) {
            root.owner-y + root.owner-height + 8px;
        } else {
            root.owner-y + ((root.owner-height - hght) / 2);
        }
    }

    tool-tip := Rectangle {
        x: 0;
        y: 0;
        clip: false;
        background: black;//Theme.foreground;
        border-color: white;
        border-width: 1px;
        opacity: 0;
        visible: show;
        width: layout.preferred-width;
        height: layout.preferred-height;
        layout := HorizontalLayout {
            padding: 5px;
            Text {
                text: root.text;
                //text: "Reset";
                color: white;//Theme.background-lightest;
            }
        }

        states [
            visible when show: {
                opacity: 1.0;
                in {
                    animate opacity {
                        duration: 175ms; delay: 700ms;
                    }
                }
            }
        ]
    }
}